<template>
  <el-container class="designer-view panel-block">
    <el-header class="sa-header">
      <div class="sa-title sa-flex sa-row-between">
        <span>设计师模板</span>
        <div>
          <el-button class="sa-button-refresh" icon="RefreshRight" @click="getData()"></el-button>
        </div>
      </div>
    </el-header>
    <el-main class="sa-p-0 sa-m-0" v-loading="state.loading">
      <div v-if="state.list.length > 0" class="designer-wrap sa-flex sa-flex-wrap">
        <template v-for="item in state.list" :key="item">
          <div class="item">
            <el-carousel
              trigger="click"
              height="480px"
              :autoplay="false"
              :loop="false"
              indicator-position="none"
            >
              <el-carousel-item v-for="page in item.page" :key="page">
                <sa-image :url="page.image" :suffix="{}"></sa-image>
              </el-carousel-item>
            </el-carousel>
            <div class="footer">
              <div class="name">{{ item.name }}</div>
              <div class="platform sa-flex">
                <div class="label">支持平台：</div>
                <div v-if="item.platform">
                  <sa-icon
                    class="sa-m-r-8"
                    v-for="pl in item.platform"
                    :key="pl"
                    :icon="'sa-shop-decorate-' + pl"
                    size="20"
                    :style="{
                      color: platformList.filter((pf) => {
                        return pf.type == pl;
                      })[0].color,
                    }"
                  />
                </div>
              </div>
              <div class="memo sa-flex">
                <div class="label">备注：</div>
                <div>{{ item.memo }}</div>
              </div>
              <div class="oper sa-flex sa-row-right">
                <el-button
                  v-auth="'shop.admin.decorate.designer.use'"
                  class="is-link"
                  type="primary"
                  size="small"
                  @click="onUse(item.id)"
                >
                  使用
                </el-button>
              </div>
            </div>
          </div>
        </template>
      </div>
      <sa-empty v-if="state.list.length == 0" />
    </el-main>
  </el-container>
</template>

<script setup>
import { onMounted, reactive } from 'vue';
import { useModal } from '@/sheep/hooks';
import PagePreview from './preview.vue';
import { api } from '../decorate.service';
import { platformList } from '../page/data';

const state = reactive({
  loading: false,
  list: [],
});

async function getData() {
  state.loading = true;
  const { error, data } = await api.designer.list();
  error === 0 && (state.list = data);
  state.loading = false;
}

async function onUse(id) {
  api.designer.use(id);
}

function onPreview(item) {
  useModal(PagePreview, {
    title: '预览',
    data: item,
    class: 'preview-dialog',
  });
}

onMounted(() => {
  getData();
});
</script>
<style lang="scss" scoped>
.designer-view {
  .designer-wrap {
    padding: 10px var(--sa-padding);
    .item {
      position: relative;
      width: 246px;
      height: 480px;
      border: 1px solid var(--sa-space);
      box-shadow: 0 0 4px rgba(89, 89, 89, 0.2);
      box-sizing: border-box;
      border-radius: 4px;
      margin-bottom: var(--sa-padding);
      overflow: hidden;
      margin-right: 20px;
      img {
        width: 100%;
      }
      &:hover {
        transform: scale(1.02);
        box-shadow: 0 4px 16px rgba(89, 89, 89, 0.24);
        .footer {
          opacity: 1;
        }
      }
      :deep() {
        .image-slot {
          height: 200px;
        }
      }
      .footer {
        position: absolute;
        bottom: 0;
        width: 100%;
        height: fit-content;
        padding: 0 12px;
        background: var(--sa-background-assist);
        transition: all 0.5s;
        opacity: 0;
        .name {
          padding: 12px 0 4px;
          color: var(--sa-title);
          font-size: 16px;
        }
        .platform {
          height: 28px;
          font-size: 14px;
          color: var(--sa-subtitle);
        }
        .memo,
        .update-time {
          height: 20px;
          font-size: 12px;
          color: var(--sa-subfont);
        }
        .label {
          flex-shrink: 0;
        }
        .oper {
          height: 36px;
          .el-button + .el-button {
            margin-left: 8px;
          }
        }
      }
    }
  }
}
</style>
